<template>
  <div>
    <Header :toSonData="toSonData"> </Header>
    <el-container>
      <el-container>
        <el-aside :width="isCollapsed ? '64px' : '200px'">
          <div class="toggle-button" @click="toggle" v-if="isCollapsed==true">M</div>
          <div class="toggle-button" @click="toggle" v-else>LML</div>
          <el-menu  style="min-height: calc(90vh - 50px)" :collapse="isCollapsed" :collapse-transition="false" :router="true">
            <!-- 一级菜单 -->
            <el-submenu :index="item.id + ''" v-for="item in user.data.permissions" :key="item.id">
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i :class="item.icon"></i>
                <!-- 文本 -->
                <span>{{item.comment}}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.id" @click="addTab(subitem)">
                <template slot="title">
                  <!-- 图标 -->
                  <i :class="subitem.icon"></i>
                  <!-- 文本 -->
                  <span>{{subitem.name}}</span>
                </template>
              </el-menu-item>

            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>
          <!-- 头部面包屑导航 -->
<!--          <el-breadcrumb separator-class="el-icon-arrow-right" class="total-breadcrumb">-->
<!--            <el-breadcrumb-item :to="{ path: '/DefaultHome' }">首页</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item v-for="item in breadCrumbList" :key="item.path">{{item.name}}</el-breadcrumb-item>-->
<!--          </el-breadcrumb>-->
          <el-tabs  v-model="editableTabsValue" type="card"  @tab-remove="removeTab"  @tab-click="handleClick" >
            <el-tab-pane   v-for="(item, index) in editableTabs" :key="item.id" :label="item.title" :name="item.name" :closable="item.closable"></el-tab-pane>
          </el-tabs>


          <!-- 显示页面 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>



    <!--    <Header :toSonData = "toSonData" ></Header>-->
<!--    <el-container>-->
<!--      <el-container>-->
<!--        <el-aside >-->
<!--          <el-menu style="min-height: calc(100vh - 50px)" router active-text-color="#ffd04b">-->
<!--            <span index="1" v-for="(item,index) in this.$router.options.routes" :key="index">-->
<!--              <el-submenu index="" v-if="!item.hidden" >-->
<!--                <template slot="title" ><i class="el-icon-location"></i>-->
<!--                  <span>{{ item.name }}</span>-->
<!--                </template>-->

<!--                <el-menu-item :index="m.path" v-for="m in user.data.permissions" :key="m.id">-->
<!--                              <i :class="m.icon"></i>{{m.comment}}-->
<!--                </el-menu-item>-->

<!--              </el-submenu>-->
<!--            </span>-->

<!--          </el-menu>-->
<!--        </el-aside>-->
<!--        <el-main>-->
<!--          <router-view/>-->
<!--        </el-main>-->
<!--      </el-container>-->
<!--    </el-container>-->


  </div>
</template>

<script>
import Header from "@/components/Header"
export default {
  name: "Home",
  components: {
    Header
  },
  data() {
    return{
      user:{},
      toSonData:'',
      isCollapsed:false,//是否折叠
      editableTabsValue: '1',//默认显示的tab
      editableTabs: [{
        title: '首页',
        name: '/DefaultHome',
        content: 'Tab 1 content',
        closable: false,
      }],
      tabIndex: 1,//tab目前显示数

    }
  },
  created() {
    let  userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
    // console.log(userStr)
    // console.log(this.$route);
    this.toSonData = JSON.parse(userStr)
     /*
      * 使用js的sessionStorage读取刷新前的数据，并按刷新前的tabs顺序重新生成tabs
      */
    const sessionTabs = JSON.parse(sessionStorage.getItem("editableTabs"))

    if(sessionTabs !== null) {
      for(let i=0; i<sessionTabs.currTabsItem.length; i++) {
        this.editableTabs.push({
          title: sessionTabs.currTabsItem[i].title,
          name: sessionTabs.currTabsItem[i].name,
          content: sessionTabs.currTabsItem[i].content,
          closable: true,
        })
      }
      this.editableTabsValue = sessionTabs.currActiveTabs;
      this.tabIndex = sessionTabs.currIndex;
    }

  },
  computed: {

  },
  mounted(){
    //存储头部标签页
    window.addEventListener('beforeunload', e => {
      sessionStorage.setItem("editableTabs", JSON.stringify({
        currTabsItem: this.editableTabs.filter(item => item.name !== "/DefaultHome"),
        currActiveTabs: this.editableTabsValue,
        currIndex: this.tabIndex
      }))
    });
  },
  watch:{

  },
  methods:{
    //点击折叠按钮
    toggle(){
      this.isCollapsed = !this.isCollapsed
    },
    addTab(subitem) {
      //点击侧边栏新增标签   判断添加的是否存在如果不存在添加

      const has = this.editableTabs.find(item => item.title == subitem.name);
      if (!has) {
        this.editableTabs.push({
          title: subitem.name,
          name: subitem.path,
          content: subitem.path,
          closable: true,
        });
      }
      let targetName = ++this.tabIndex + '';
      this.editableTabsValue = targetName;

    },
    handleClick(tab, event){
      //点击标签跳转页面
      this.$router.push(tab.name)
    },
    removeTab(targetName) {
      //删除标签
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;

          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      this.$router.go(-1);// 返回上一步路由，返回上一个标签页

    }
  }
}
</script>

<style scoped>


.toggle-button{
  background-color: cornflowerblue;
  font-size: 15px;
  line-height: 30px;
  color: aliceblue;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  font-weight: bold;

}


</style>
